<template>
	<div class="coupon-single">
		<div class="type">
			<ul class="top">
				<li class="noUse" :class="index == 1 ? 'active' : ''"  @click="jumpto(1)" >未使用</li>
				<li class="used" :class="index == 2 ? 'active' : ''"  @click="jumpto(2)">已使用</li>
				<li class="over" :class="index == 3 ? 'active' : ''"  @click="jumpto(3)">已过期</li>
			</ul>
		</div>
		<div class="Broker" v-if="showNouse" v-for="x in uselist" :id="x.id" :type="x.type" @click="goHome">
			<ul class="left">
				<li class="money"><span>¥</span>{{x.min_money}}</li>
				<li class="text">满{{x.max_money}}元可用</li>
			</ul>
			<ul class="right">
				<li class="name">{{x.subTitle}}</li>
				<li class="time">{{x.stime}}&nbsp;<span>{{x.tag}}</span></li>
			</ul>
		    <img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/more@2x.png" class="lt" >
		</div>

		<div class="Broker" v-if="showUsed" v-for="x in uselist" :id="x.id" :type="x.type" >
				<ul class="left">
					<li class="money" style="color:#969696"><span>¥</span>{{x.min_money}}</li>
					<li class="text">满{{x.max_money}}元可用</li>
				</ul>
				<ul class="right">
					<li class="name">{{x.subTitle}}</li>
					<li class="time">{{x.stime}}<span>{{x.tag}}</span></li>
				</ul>
				<img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/used.png" style="width: 1.1rem;height: 1.1rem;margin-top: 0.45rem;margin-left: 0.45rem;">
		</div>

		<div class="Broker" v-if="showOverdue" v-for="x in uselist" :id="x.id" :type="x.type">
			<ul class="left">
				<li class="money" style="color:#969696;"><span>¥</span>{{x.min_money}}</li>
				<li class="text">满{{x.max_money}}元可用</li>
			</ul>
			<ul class="right">
				<li class="name">{{x.subTitle}}</li>
				<li class="time">{{x.stime}}<span>{{x.tag}}</span></li>
			</ul>
			<img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/imgChange/expired.png" style="width: 1.1rem;height: 1.1rem;margin-top: 0.45rem;margin-left: 0.45rem;">
		</div>
		<!--空页面-->
		<div id="coupon-empty" v-if="nosh">
			<img src="https://khh-server.oss-cn-beijing.aliyuncs.com/resourse/IMG/static/coupon_empty.png"/>
			<span class="noVoucher">没有相关优惠券哦～</span>
			<button class="btn" @click="goHome">逛逛首页</button>
		</div>
	</div>
</template>

<script>
    import config from "../config/config.js";
    import MtaH5 from 'mta-h5-analysis';
	export default{
		data(){
			return{
                uselist:[],
                showNouse:true,
				showUsed:false,
				showOverdue:false,
				index:1,
                nosh:false
			}

		},
		methods:{
			getNouse(){
                var value=JSON.stringify({"type":1,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Coupon/GetCoupon',{
                        value:value,
                        key:key
                },config)
                    .then(function(response) {
                        if(response.data.code==200){
                            if(response.data.data==''){
                                this.nosh=true;
							}else{
                                this.nosh=false;
                                this.uselist=response.data.data;
							}
						}

                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
			},
			jumpto(index){
				this.index = index;
                if(index==1){
                    this.showNouse=true;
                    this.showUsed=false;
                    this.showOverdue=false;
                }else if(index==2){
                    this.showNouse=false;
                    this.showUsed=true;
                    this.showOverdue=false;
                }else{
                    this.showNouse=false;
                    this.showUsed=false;
                    this.showOverdue=true;
                }
                var value=JSON.stringify({"type":this.index,"token":localStorage.getItem('token')}),
                    key=demo(value);
                axios.post('/Home/Coupon/GetCoupon',{
                        value:value,
                        key:key
                },config)
                    .then(function(response) {
                        if(response.data.code==200){
                            if(response.data.data==''){
                                this.nosh=true;
                                this.uselist=[]
                            }else{
                                this.nosh=false;
                                this.uselist=response.data.data;
                            }
                        }


                    }.bind(this))
                    .catch(function (error) {
                        console.log(error);
                    });
			},
            goHome(){
			    this.$router.push('/home/index/00')
			}
		},
        activated(){
		    this.getNouse();
            MtaH5.init({
                "sid":'500594815',
                "cid":'500595819',
                "autoReport":0,
                "senseHash":0,
                "senseQuery":0,
                "performanceMonitor":0,
                "ignoreParams":[]
            });
            MtaH5.pgv();
		}
	}
</script>

<style>
</style>